<template>
	<view class="container">
		<textarea placeholder="介绍一下~" :auto-height="true" maxlength="-1" v-model="form.textMessage"
			class="post-txt"></textarea>
		<!-- 上传图片 -->
		<uni-file-picker ref="fileImage" :limit="9" v-model="mediaList" :auto-upload="false" fileMediatype="image"
			mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleteImage"></uni-file-picker>
		<!-- 价格 -->
        <view class="choose-item">
        	<text class="txt">物品名</text>
        	<input v-model="form.name"  placeholder="请输入物品名"></input>
        </view>
		<!-- 原价 -->
		<view class="choose-item">
			<text class="txt">价格</text>
			<input v-model="form.price" type="number" placeholder="￥0.00"></input>
		</view>
		<!-- 运费 -->
		<view class="choose-item">
			<text class="txt">地址</text>
			<input v-model="form.address"  placeholder="所在地"></input>
		</view>
		<!-- 联系电话 -->
		<view class="choose-item">
			<text class="txt">联系方式（电话）</text>
			<input v-model="form.contact" type="number" placeholder="请填写联系方式"></input>
		</view>
		<view class="submit-btn">
			<button type="primary" @click="submit"> 发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mediaList: [],
				form: {},
			};
		},
		onLoad(options) {
            this.form.userId = uni.getStorageSync("user").id;
            console.log(this.form.userId);
		},
		methods: {
            select(e){
                console.log("select");
				const tempFilePaths = e.tempFilePaths;//e是获取的图片源
				uni.uploadFile({
					url: '/gongyi/common/upload', //上传图片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: res => {
						this.form.pictureUrl = JSON.parse(res.data).name;
						console.log(this.form.pictureUrl);
					}
                })
            },
            deleteImage(){
              uni.request({
                  url:'/gongyi/common/delete?name='+this.form.pictureUrl,
                  method:'DELETE',
                  success: () => {
                       uni.showToast({
                           title:'图片移除成功！',
                           icon:'success'
                       })
                  }
              })  
            },
			// 获取上传进度
			progress(e) {
				// console.log('上传进度：', e);
			},

			// 上传成功
			success(e) {
				this.submit();
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e);
			},
			submit() {
                uni.request({
                    url:'/gongyi/second/addSecond',
                    method:'POST',
                    data:this.form,
                    success: (res) => {
                        console.log(res);
                        uni.showToast({
                            icon:'success',
                            title:'发布成功！'
                        });
                        uni.switchTab({
                            url:'/pages/index/index'
                        })
                    }
                })
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title-input {
		border-bottom: 1px solid #f5f5f5;
		margin: 20rpx 0;
		padding: 20rpx 0;
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.upload-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		background-color: #f5f5f5;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.icon {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 24rpx;
		}
	}

	.upload-video {
		width: 180rpx;
		height: 180rpx;
		margin-top: 30rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #F5F5F5;

		.txt {
			font-weight: bold;
			margin-right: 60rpx;
		}

		input {
			flex: 1;
			margin-left: auto;
			text-align: right;
		}
	}

	.submit-btn {
			display: flex;
			align-items: center;
			height: 35px;
			line-height: 35px;
			margin-left: 10px;
	}
</style>

